<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="wrap">
    <canvas id="myCanvas" width="145" height="185"></canvas>
</div>
</body>
<script>
  // 创建一个圆角矩形边框进度条的函数
  function createRoundedRectProgressBar(ctx, x, y, width, height, borderRadius, progress, barColor) {
    // 保存当前的状态
    ctx.save();

    // 创建圆角矩形
    ctx.beginPath();
    ctx.moveTo(x + borderRadius, y);
    ctx.lineTo(x + width - borderRadius, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + borderRadius);
    ctx.lineTo(x + width, y + height - borderRadius);
    ctx.quadraticCurveTo(x + width, y + height, x + width - borderRadius, y + height);
    ctx.lineTo(x + borderRadius, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - borderRadius);
    ctx.lineTo(x, y + borderRadius);
    ctx.quadraticCurveTo(x, y, x + borderRadius, y);
    ctx.closePath();

    // 设置填充样式为无
    ctx.fillStyle = 'rgba(0, 0, 0, 0)';
    ctx.fill();

    // 设置边框样式
    ctx.strokeStyle = barColor;
    ctx.lineWidth = 3;
    ctx.stroke();

    // 根据进度绘制进度条
    ctx.beginPath();
    ctx.moveTo(x + borderRadius, y);
    ctx.lineTo(x + (width * progress) - borderRadius, y);
    ctx.quadraticCurveTo(x + (width * progress), y, x + (width * progress), y + borderRadius);
    ctx.lineTo(x + (width * progress), y + height - borderRadius);
    ctx.quadraticCurveTo(x + (width * progress), y + height, x + (width * progress) - borderRadius, y + height);
    ctx.lineTo(x + borderRadius, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - borderRadius);
    ctx.lineTo(x, y + borderRadius);
    ctx.quadraticCurveTo(x, y, x + borderRadius, y);
    ctx.closePath();

    // 设置填充样式为渐变色
    var gradient = ctx.createLinearGradient(x, y, x + (width * progress), y);
    gradient.addColorStop(0, '#07bef1');
    gradient.addColorStop(1, '#0072bc');
    ctx.fillStyle = gradient;
    ctx.fill();

    // 恢复之前的状态
    ctx.restore();
  }

  // 使用示例
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  var x = 100;
  var y = 50;
  var width = 200;
  var height = 40;
  var borderRadius = 10;
  var progress = 10.05; // 进度为75%
  createRoundedRectProgressBar(ctx, x, y, width, height, borderRadius, progress);
</script>
</html>
